大家好，我是愛無障礙網頁設計的大叔，
一個近年不得不研究無障礙網頁、但是暸解了又愛上它的中年男子。

這次是第一次參賽，
雖然有在其他地方寫過技術文章，但內容都硬梆梆的，寫久了感覺自己有點像機器人，
可能文筆不太好吧也沒幾隻小貓在看，不如這次就隨性一些不要想太多，
以寫日記故事的方式讓自己放輕鬆的過鐵人賽這 30 天。

今天是 2022 年 9 月 6 日，下著小雨伴著微涼的風，
不知為什麼想起當初接觸無障礙網頁設計時的情境...

大概四年前，剛從前一家公司離職，
在職期間因為公司有接政府專案，
而政府專案通常都要通過無障礙網頁設計 AA 標章，
那時候只想著趕快照著修改建議改一改、趕快通過就好，
完全不想理解內容，也不管隨便亂做有什麼後果，
這就是我最初接觸無障礙網頁設計的態度，
也好險當初可能檢驗的機制還不完善，都還撐得過去。

離職之後我以為應該不會再碰政府專案了，只想專心在產品上面，
但命運弄人，新公司待一個月後覺得不太妙果斷離職，就到了現在的公司。
現在的公司有產品也有接政府專案，當初的我也算能接受，
反正有產品做，可以累的時候換口味，
當然專案也是要過無障礙，不過因為有經驗，倒也不難應付。

直到一年多前有一天，無障礙網路空間服務網宣布不再受理 2.0 版標章申請的消息，
一切都變了樣。

從版本 2.1 開始，無障礙網路空間服務網似乎是上緊了發條變得很積極，
人工審核也變得比較嚴謹，就連 Youtube 頻道也開始有統一的顯示規格。

「啊～該是時候正視這個問題了呢！」我如此喃喃自語著。

但也沒有太認真對待啦。

都已經混那麼久了，當下的反射動作就是直接 Google 搜尋「無障礙 前端 css UI 框架」之類的關鍵字，
找看看有沒有現成有做無障礙的前端 CSS 框架，
有找到很不錯的例如 Bootstrap、IBM 的 Carbon，
甚至是 headless UI 這種只幫忙做行為沒有做樣式的(tailwind 做的)，
但後來都放棄了，原因有以下幾點：

• 政府部門還是會求 IE（雖然當時已經有說 IE 要終結了，但大叔我也是笑笑的面對這個新聞）
• 無障礙網路空間服務網雖然有參考各國家的標準，但有些規範可能不相同
• 要符合 Freego 機器掃描
• 如果要改國外的 code，那就會造成版本鎖死。

在以上的種種考量下，沒辦法了，心裡只有一個念頭：

「我們自己來刻一個框架吧！」

因為在前公司其實有做過類似的事情，所以當初也覺得這個念頭也沒有什麼，
但實際碰了才知道水有多深，深到現在還拔不出來。

「到底是有多深？」您可能會問，待我緩緩道來：

首先，必須重新熟悉 HTML。
不管是線上還是書本，要把字典嗑完，才有辦法暸解每一個 tag 在什麼時間點使用、如何使用、它們都有什麼屬性與特性以及代表著什麼意義，否則就會造成聽眾混淆（對，是聽眾，因為可能會有視覺不便的使用者在瀏覽您的網頁）。

再者，必須重新熟悉 CSS。
一樣要把 CSS 的字典嗑乾淨，因為在切版時，必須善用各種屬性，才能改變 HTML 原本的樣式，進而達成設計稿上的效果。

三，熟悉 WAI-ARIA。
來看看這一句：「 No ARIA is better than Bad ARIA 」，為了讓不方便的人可以更容易暸解網頁內容的屬性也必須熟知，才能正確運用，否則就是徒增困擾。

四，無障礙網路空間服務網全部資料都要看過一遍。
必須要知道所有規範、申請流程、怎樣會被退件、被退件又會怎麼樣、常見問題、機器掃描如何使用等，沒有先閱讀過，到時就還是跟以前一樣一直踩雷再去掃雷。（包含官方的 Youtube 喔）

「到這邊，可以下手開始刻框架了嗎？」

當然還沒，大叔我打到這邊手已經酸到不行了我，這像是在寫故事嗎？還不是跟以前一樣寫硬邦邦的內容...

再開始刻之前，需要一個 Design System 的規範，
才有辦法開始發展框架，而且就算寫完框架，怎麼測試也是重點，
還有文件啊，沒有文件怎麼讓人家使用，阿還要開源啊...！＠＃＄％

大叔我手痠到不行，直接大概列出還有哪些要準備的事項好了：

五，Design System 規範，除了要有如何設計規範的知識之外，還必須對顏色、文字做一番研究，什麼是對比？怎樣在螢幕上才算是大文字？RWD 又有什麼規範？

六，搜集測試工具，包含書籤工具、Google 擴充功能、線上工具、色盲檢測、freego、都找過一輪挑出好用的使用。

七，認識裝置的輔助使用，每個裝置都有針對無障礙的支援，必須暸解到裝置裡有什麼樣的支援、暸解使用者會怎麼用、以及可能會有哪些裝置輔具，使用裝置的場合會是什麼樣子的情形？

八，文件工具，必須要有一個好的協作撰寫文件的工具，讓設計師與工程師們溝通順利。

九，挑選框架，跟團隊討論後決定使用 Vue，因為 Vue2 有支援 IE，而且考量到之後框架可以讓更多新手切版使用，特意挑一個入門門檻比較低、比較能銜接只使用過 jquery 的人。

十，規劃好開始實作，利用 Github 與 npm 開源上架，把愛傳出去。

十一，做一個宣傳網站吧，把愛傳出去 part2，在人力不夠的情形下，如何快速建立網站還要過無障礙？

以上每一篇分上下篇就能撐過 30 天了吧，我真的要昏倒了，大叔體力不夠了，這次就這樣吧。

「誒誒，標題明明就寫意識到無障礙網頁設計的重要性，這篇幾乎都在講技術啊？」

其實齁，光技術都要講這麼多，你就要知道這個東西多重要，重要到需要這麼多眉眉角角都要顧到。

不過大叔我還是可以給兩個連結，希望大家都要點進去看一下，
第一篇是「盲人怎么用手机？如何打造视障友善的app？信息无障碍小知识【无障碍设计研究小组】」，這是個10分鐘輕鬆暸解視覺不方便的人如何使用手機的影片。

第二篇是從官網影片看來的，裡面分享一位程式設計師如何用嘴巴寫程式，這個議題可能會比較讓這裡的客群有感，但這裡的用嘴巴寫程式並不是大家所想的那個意思，您可以試著想想，萬一你賴以為生的工具-萬能的雙手-出現問題導致你不能寫 Code 的時候該怎麼辦呢？是要放棄轉行，還是堅持到底？

今天大概就講到這裡吧，另外，我其實不太喜歡 markdown ，因為它讓我不能設定另開視窗的連結，理由是有時候我不想讓使用者離開網站，這樣很容易讓使用者分心，另開一個視窗去看，看完再回來。

哎，就讓我順便偷偷抱怨吧，如果不每天抱怨一下，實在是沒辦法當一個好大叔。今天就這樣吧。
（喔！po完文才發現 iT邦幫忙會自動將連結另開視窗，不錯不錯！）